import { html2dom } from "./html2dom.js";

export class Message {
    constructor(d) {
        this.d = d;
    }
    html() {
        return `<div class="UserMessage">
			<div class="UserMessage__row UserMessage__row--agent">
				<div class="UserMessage__content UserMessage__content--agent">
					<div class="UserMessage__msg UserMessage__msg--agent">
						<div class="css-1yk6uaw" style="opacity: 1;">
							<div class="MessageContentText css-1r7t7ng"><span>${this.d.content}</span>
							</div>
						</div>
					</div>
					<div class="UserMessage__avatar UserMessage__avatar--agent css-1j3z9vo e107lob30">
						<svg viewBox="0 0 24 24" display="inline-flex" color="currentColor" role="presentation" font-size="20" class="css-y40yng">
							<path d="M20.579 9.062a5.946 5.946 0 0 0-5.759-4.48H14v-.744A2.337 2.337 0 0 0 12 2a2.337 2.337 0 0 0-2 1.838v.744H8.871a5.946 5.946 0 0 0-5.759 4.48C1.761 9.157 1 10 1 11.646v5.206a2.527 2.527 0 0 0 2.294 2.6 2.549 2.549 0 0 0 .827-.147 5.934 5.934 0 0 0 4.75 2.378h5.949a5.933 5.933 0 0 0 4.75-2.378 2.549 2.549 0 0 0 .827.147 2.6 2.6 0 0 0 2.6-2.6v-5.206a2.6 2.6 0 0 0-2.418-2.584zM10.358 16.48a1.487 1.487 0 1 1-2.974 0v-1.487a1.487 1.487 0 1 1 2.974 0zm5.949 0a1.487 1.487 0 1 1-2.974 0v-1.487a1.487 1.487 0 1 1 2.974 0z">
							</path>
						</svg></div>
					<div class="css-16r4dre e107lob30">
						<div class="css-1bvc4cc e107lob30">
							<div class="css-15ro776 e8amzt60"><svg viewBox="0 0 24 24" display="inline-flex" color="currentColor" role="presentation" font-size="1" class="css-142i08q">
									<path d="M0.41,13.41L6,19L7.41,17.58L1.83,12M22.24,5.58L11.66,16.17L7.5,12L6.07,13.41L11.66,19L23.66,7M18,7L16.59,5.58L10.24,11.93L11.66,13.34L18,7Z">
									</path>
								</svg></div><span>${this.d.sendTime}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
        `
    }
    htmlVisitor() {
        return `<div class="UserMessage">
        <div class="UserMessage__row UserMessage__row--user">
            <div class="UserMessage__content UserMessage__content--user">
                <div class="UserMessage__msg UserMessage__msg--user">
                    <div class="css-1iwl37" style="opacity: 1;">
                        <div class="MessageContentText css-8fgqz">
                            <span>${this.d.content}</span></div>
                    </div>
                </div>
                <div class="UserMessage__avatar UserMessage__avatar--user css-py7n25">
                    <div class="css-sqmchz">
                        <div class="css-jo2zmf">${this.d.visitorId}</div>
                    </div>
                </div>
                <div class="css-17pl5mq e107lob30">
                    <div class="css-0 e8amzt60"><span>${this.d.sendTime}</span></div>
                </div>
            </div>
        </div>
    </div>`
    }
    dom() {
        if (this._dom == null) {
            this._dom = html2dom.h2d(this.d.sendBy == "visitor" ? this.htmlVisitor() : this.html());
        }
        return this._dom;
    }
}